<template>
	<view class="container">
		<!-- 左侧菜单 -->
		<scroll-view scroll-y class="menu-left">
			<view v-for="(item, index) in menuItems" :key="item.departmentId" class="menu-item"
				:class="{ active: activeIndex === index }" @click="selectMenu(index)">
				{{ item.departmentName }}
			</view>
		</scroll-view>

		<!-- 右侧子菜单 -->
		<scroll-view scroll-y class="menu-right"
			v-if="menuItems.length > 0 && activeIndex >= 0 && menuItems[activeIndex]">
			<view v-for="(item, index) in menuItems[activeIndex].children" :key="item.departmentId"
				class="sub-menu-item" @click="goToDoctorList(item.departmentId)">
				{{ item.departmentName }}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		queryDepartments
	} from '@/api/appointment.js';

	export default {
		data() {
			return {
				activeIndex: -1, // 初始为 -1
				menuItems: []
			};
		},
		created() {
			this.departmentsDataInfo();
		},
		methods: {
			//部门数据渲染
			departmentsDataInfo() {
				queryDepartments()
					.then(res => {
						if (res.code === 1) {
							this.menuItems = (res.data || []).map(item => ({
								...item,
								children: item.children || [] // 确保 children 存在
							}));
							if (this.menuItems.length > 0) {
								this.activeIndex = 0; // 数据加载完成后设置默认选中项
							}
						}
					})
					.catch(err => {
						console.error('获取科室数据失败:', err);
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					});
			},
			selectMenu(index) {
				this.activeIndex = index;
			},
			goToDoctorList(subItemId) {
				console.log("id", subItemId)
				uni.navigateTo({
					url: `/pages/doctorList/doctorList?departmentId=${subItemId}`
				});
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		height: 100vh;
	}

	.menu-left {
		width: 40%;
		background-color: #fff;
	}

	.menu-right {
		width: 60%;
		padding: 10px;
	}

	.menu-item {
		padding: 15px;
		border-bottom: 1px solid #ccc;
		color: #000;
		text-align: center;
	}

	.menu-item.active {
		background-color: #87cefa;
		border-left: 4px solid #3b7fff;
	}

	.sub-menu-item {
		padding: 15px 10px;
		border-bottom: 1px solid #eee;
		text-align: center;
		margin: 5px 0;
		background-color: #f9f9f9;
		border-radius: 4px;
	}

	/* 添加滚动条样式 */
	scroll-view {
		height: 100%;
	}
</style>